前言

「巧婦難為無米之炊」

再怎麼厲害的前端，沒有資料可以讓你渲染也是白搭XD
因此就從如何取得資料開始吧！

本日正文

其實我覺得資料的取得方式從基礎到進階，可以這樣分：
1.變數 > 2.import檔案 > 3. call API
1跟2比較單純，是純前端，
3開始就需要跟後端介接了，
因此今天的文章會從1開始著手~

1. 變數

還記得昨天的例子嗎？

import * as React from "react";
import { Text, Flex, ListItem, OrderedList } from "@chakra-ui/react";

export default function Example() {
  return (
    <>
      <Text my={4} as="h2" fontSize="2xl" textAlign="center">
        2022 鐵人餐廳每月銷售排行 TOP5
      </Text>
      <OrderedList px={4}>
        <ListItem my={2}>
          <Text>牛肉麵</Text>
          <Flex>
            <Text>人氣指數：</Text>
            <Text color="#FF8000">★★★★★</Text>
          </Flex>
        </ListItem>
        <ListItem my={2}>
          <Text>小籠包</Text>
          <Flex>
            <Text>人氣指數：</Text>
            <Text color="#FF8000">★★★★☆</Text>
          </Flex>
        </ListItem>
		... (略)
      </OrderedList>
    </>
  );
}

你可能有發現每一項的星星我們都有設定顏色 color="#FF8000"，
但如果今天你被指定要換一個顏色，
如果你寫死色碼，
那麼就表示有幾項你就要改幾項，
我想你應該不會想要做 高級手工藝 對吧？
(雖然你可能會說用取代也不會很麻煩，
但如果萬一你要改的設定在其它區塊也有一樣設定，你就會取代錯了XD)

那麼如果我們改寫一下，
先在一開始的地方宣告一個變數 starColor 並賦予值為 #FF8000，
再來就是把每一項有設定星星顏色的地方都改成拿 starColor，
像這樣：

import * as React from "react";
import { Text, Flex, ListItem, OrderedList } from "@chakra-ui/react";

export default function Example() {
  const starColor = '#FF8000';
  return (
    <>
      <Text my={4} as="h2" fontSize="2xl" textAlign="center">
        2022 鐵人餐廳每月銷售排行 TOP5
      </Text>
      <OrderedList px={4}>
        <ListItem my={2}>
          <Text>牛肉麵</Text>
          <Flex>
            <Text>人氣指數：</Text>
            <Text color={starColor}>★★★★★</Text>
          </Flex>
          <Text>銷售量：66</Text>
        </ListItem>
        <ListItem my={2}>
          <Text>小籠包</Text>
          <Flex>
            <Text>人氣指數：</Text>
            <Text color={starColor}>★★★★☆</Text>
          </Flex>
          <Text>銷售量：55</Text>
        </ListItem>
		... (略)

其實效果跟直接把色碼寫在上面是一樣的哦！

那麼如果現在我們要把星星顏色換掉，
我們只需要去更換 starColor 裡面的值就可以了，
像這樣：

const starColor = '#009393';

你可以看到全部的星星都換成綠色了！

不過因為是用換顏色舉例，
可能會比較沒辦法把它跟拿資料聯想在一起，
現在再讓我們假設另外一種情境，
假設你要將銷售量大於 50 的料理加上「人氣料理」的標記，
那麼你該怎麼做呢？
用肉眼看哪幾道銷售量>50然後加上人氣料理的Tag

當然不是啊XD
讓我們再加上一個變數 const hitCount = 50
(也就是人氣數量為50的資料)
然後去判斷銷售量是否大於 hitCount，
是的話就顯示人氣料理的 Tag，
像這樣：

{66 >= hitCount ? (
  <Tag ml={2} size="sm" variant="solid" colorScheme="red">
	人氣料理
  </Tag>
) : null}

(PS. 銷售量的數字最好的方式當然也是動態取得，
不過這邊只是範例示意，所以請先忽略XD")

雖然變數在某種層面上也算是一種寫死資料，
但因為你把很多地方會用到的相同資料合成一個共同變數，
以及你有賦予它一個有意義的變數名稱(像是hitCount可以直覺跟熱門數量聯想在一起)，
所以在後續維護上也會比較容易，
因此這個方式還是很常使用哦！

以上是在同一個頁面有取到共同資料(變數)的例子，
那如果現在有多個頁面都會用到一樣的資料(變數)呢？
該不會要在每個頁面都宣告變數吧？
當然不是啊XD

這時候層級就要更往上提，
也就是把這些資料(變數)集中在同一個檔案，
然後去 import 這個檔案來做使用就可以了~
還有一個情況是資料很多筆，
我們就可以 import 資料(通常是 json 檔)來存取使用，
像這樣：

[
	{
		"name": "牛肉麵",
		"salesVolume": 66,
	},
	{
		"name": "小籠包",
		"salesVolume": 55,
	},
	... 
	...(略)
]

所以這個範例用 import 檔案就可以做更好的優化，
那我們明天再繼續吧~~~

然後一樣附上今天的 CodeSandbox：
2022Day5 - Chakra UI

後記

其實依篇幅來說這些應該有機會同一篇寫完，
但如果不拆成多篇我怕我無法順利完賽
請原諒我拆成多篇QQ
真的很佩服參加鐵人賽的各位大大每天都可以寫(ㄐㄧˇ)出很棒的文(拜)